import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { Row, Col, Modal } from 'antd';
import styles from './index.less';
import classnames from 'classnames';
import IconFont from '@/components/IconFont';
import useModel from './useModel.js';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import AddModal from './components/addModal';
const { confirm } = Modal;

export default () => {
  const {
    state: { currentDeviceType, setCurrentTypeProps, deleteProps, data, isAdd },
    selectDeviceType,
    setState,
  } = useModel(model => [
    model.state.data,
    model.state.isAdd,
    model.state.currentDeviceType,
    model.state.setCurrentTypeProps,
    model.state.deleteProps,
  ]);

  return (
    <>
      <Row gutter={[40, 30]}>
        {data.map((item, index) => {
          return (
            <Col span={6} key={index.toString(36) + index}>
              <div
                className={classnames(
                  styles['device-type-item'],
                  currentDeviceType && item.id === currentDeviceType.id && styles['active'],
                )}
                onClick={() => {
                  if (currentDeviceType?.id === item.id) return;
                  selectDeviceType({ id: item.id, name: item.name });
                  setCurrentTypeProps.run({ id: item.id });
                }}
              >
                {/* <span */}
                {/*   className={classnames(styles['enum'])} */}
                {/*   onClick={() => { */}
                {/*     setState({ */}
                {/*       enumVisible: true, */}
                {/*       fsuTypeItem: item, */}
                {/*     }); */}
                {/*   }} */}
                {/* > */}
                {/*   <IconFont type={'iconbianji'} /> */}
                {/* </span> */}
                <span
                  className={classnames(styles['editor'])}
                  onClick={e => {
                    e.stopPropagation();
                    setState({
                      visible: true,
                      isAdd: false,
                      fsuTypeItem: item,
                      fields: [
                        {
                          name: ['name'],
                          value: item.name,
                        },
                        {
                          name: ['mask'],
                          value: item.mask,
                        },
                        {
                          name: ['scIp'],
                          value: item.scIp,
                        },
                      ],
                    });
                  }}
                >
                  <IconFont type={'iconbianji'} />
                </span>
                <span
                  className={classnames(styles['delete'])}
                  onClick={e => {
                    e.stopPropagation();
                    confirm({
                      title: `确定要删除 ${item.name} 该设备类型?`,
                      icon: <ExclamationCircleOutlined />,
                      content: '删除该设备类型将会无法查看该设备类型的报文,如果确认请单击确定按钮',
                      cancelText: '取消',
                      okText: '确定',
                      onOk() {
                        return new Promise((resolve, reject) => {
                          const res = deleteProps.run({ id: item.id });
                          if (res.result) {
                            resolve();
                          } else {
                            reject();
                          }
                        }).catch(() => console.log('Oops errors!'));
                      },
                      onCancel() {},
                    });
                  }}
                >
                  <IconFont type={'iconshanchu1'} />
                </span>
                <span>{item.name}</span>
              </div>
            </Col>
          );
        })}
        <Col span={6}>
          <div
            className={classnames(styles['device-type-item'])}
            onClick={() => {
              setState({ visible: true, isAdd: true });
            }}
          >
            <IconFont type={'iconxinzeng'} className={styles['add-icon']} />
          </div>
        </Col>
      </Row>
      <AddModal title={isAdd ? '新增' : '编辑'} isAdd={isAdd} />
    </>
  );
};
